Interface and Application Programming

This week I am going to build on last weeks work. This week I am going to make an application to see the differt sensor values. I am going to be helped by using this guide. I am going to be changing my Data Collection script such that we can visualize the data. In week 10 I had changed the firebase from a website and read it using the arduino, this week I am sending data to firebase from arduino then reading from the website. The visualization will be using Chart.js which is an open source javascript library for data visualization. Each of the sensors will have its own line graph where the x-axis is the time of recording and the y-axis is the analog output of the sensors.

Chart.js

A couple challenges I was running into was how and when to add the the graphs, and how to get the time which the sensors were running. I also wanted to use good object oriented programming proinciples. This means that I am going to have functions to do the work of the program then one loop that is running the functions when needed. I had to look on the chart.js documentation in order to see how to make the graphs, add the data, and delete the data. Chart.js was simple enough once I started understanding the workflow. In the randomnerd example they had used Highchart.js which documentation was similar but had key differences. So it took me a while to understand how to make the graph look like I wanted. Through this I saw how to add the dataset to the graph. I set the data to an empty array. Then in one of my functions I added to the dataset the graph was drawing upon. In the function that added to the dataset I also made the graph reload to show the changes in the dataset. In my chart creation function, I passed in the IdElement and sensor number, so that I don't need to make a function for each sensor/Id. I created a graph for each of the 6 sensors.

The arduino is sending the data from the sensors to a the database under the child of the userID. The javascript program is looking for the changes the specific users database and then adding that the graph.

ESP32 Dev Board

During this week I also worked on my ESP32 Dev Board to run my final project. This took a couple of tries and a lot of time looking at the ESP32 documentation. I was looking a lot at Treydan's website because he has a good week of using and making a board using the ESP32 chip. After making the scematic and board design. It took my two tries to mill the board. The first time the pads did not mill correctly. So I tried to cut the pads myself with a knife. The second time I milled the board the pads worked. but the first time I tried to put the ESP on the board, I cold soldered it a couples times. and it smooshed the plastic pieces. After one more milling I successfully made the board. I used this for the rest of the semester.

Resources

• Guide for Real-time data loggin Page
• Tut part 2 Tutorial
• Helpful resource for adding and updating data
• Helpful resource for authentication
• Helpful resource for graphing